/*
 * @Author: 肖思汗 
 * @Date: 2025-06-16 09:45:46 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-21 09:51:13
 */

import { Button, Popup } from "@nutui/nutui-react-taro";
import { Canvas } from '@tarojs/components';
import Taro from "@tarojs/taro";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import designerStore from "../../Designer/designerStore";
import textModelStore from "../../TextModel/textModelStore";
import rightTopStore from "../rightTopStore";
import closePNG from "./img/close.png";
import perview3der from "./perview3der";
import styles from "./preView2D3D.module.less";
import preView2D3DStore from "./preView2D3DStore";
import utils from "src/utils/utils";

interface Iprops {
    children?: ReactNode
}

// 预览弹窗
export default function PreView2D3D() {

    const [secondaryCraftName, setSecondaryCraftName] = useState(designerStore.goodsBaseData.secondaryCraftName);
    const [showType, setShowType] = useState(preView2D3DStore.showType);
    const [show, setShow] = useState(preView2D3DStore.show);
    const [showText, setShowText] = useState(textModelStore.show);

    const [downloading, setDownloading] = useState(false);

    useEffect(() => autorun(() => {
        const { goodsBaseData } = designerStore;
        setSecondaryCraftName(goodsBaseData.secondaryCraftName);
        setShowType(preView2D3DStore.showType);
    }, { delay: 30 }), []);

    useEffect(() => {
        Taro.createSelectorQuery().select('#preView2D3D')
            .fields({ node: true, size: true, rect: true })
            .exec(res => {
                if (res[0]) {
                    const { bottom, height, left, node, nodeCanvasType, right, top, width } = res[0];

                    perview3der.init(node);

                    //导出图片
                    // Taro.canvasToTempFilePath({
                    //     canvas: node,
                    //     success: async (res) => {
                    //         console.log(res.tempFilePath);
                    //         Taro.saveImageToPhotosAlbum({
                    //             filePath: res.tempFilePath
                    //         });
                    //     }
                    // });


                }
            });

    }, []);

    useEffect(() => autorun(() => {
        setShow(preView2D3DStore.show);
        setShowText(textModelStore.show);
    }, { delay: 30 }), []);

    return (
        <Popup
            visible={true}
            overlay={show}
            closeOnOverlayClick={false}
            className={clsx(
                styles.preView2D3D,
                show && styles.show,
                showText && styles.showText
            )}
        >
            {
                ["升华"].includes(secondaryCraftName) &&
                <div className={clsx(styles.switchBtn, styles.fillType1 && ["升华"].includes(secondaryCraftName))} >
                    <span
                        className={clsx(styles.btn, showType === "2D" && styles.active)}
                        onClick={() => {
                            preView2D3DStore.setShowType("2D");
                        }}
                    >2D</span>
                    <span
                        className={clsx(styles.btn, showType === "3D" && styles.active)}
                        onClick={() => {
                            preView2D3DStore.setShowType("3D");
                        }}
                    >3D</span>
                </div>
            }

            {/* 渲染器 */}
            <div className={styles.renderer} >

                {/* 左切换按钮 */}
                {
                    showType === "2D" &&
                    <div
                        className={clsx(styles.leftArrow, styles.arrowBtn)}
                        onClick={() => preView2D3DStore.prevMockup()}
                    >
                        <div
                            className={clsx(styles.arrow, styles.left)}
                        />
                    </div>
                }

                <Canvas
                    className={styles.threeCanvas}
                    id='preView2D3D'
                    canvas-id='preView2D3D'
                    type='webgl'
                    style={{
                        width: '100%',
                        height: '100%',
                    }}
                    disable-scroll={true}
                    onTouchEnd={perview3der.touchEnd}
                    onTouchMove={perview3der.touchMove}
                    onTouchStart={perview3der.touchStart}
                    onClick={async () => {
                        if (!utils.isHuawei && perview3der.type === "2D") {
                            Taro.showLoading({ title: '正在渲染...' });
                            const localPath = await perview3der.exportImage();
                            console.log("localPath", localPath);
                            Taro.previewImage({
                                urls: [localPath],
                            });
                            Taro.hideLoading();
                        }
                    }}
                />


                {/* 右切换按钮 */}
                {
                    showType === "2D" &&
                    <div
                        className={clsx(styles.rightArrow, styles.arrowBtn)}
                        onClick={() => preView2D3DStore.nextMockup()}
                    >
                        <div className={clsx(styles.arrow, styles.right)} />
                    </div>
                }
            </div>

            <div className={styles.btnGroup} >
                {
                    !utils.isHuawei &&
                    <Button
                        className={styles.btn}
                        loading={downloading}
                        onClick={async () => {
                            setDownloading(true);
                            await perview3der.download();
                            setDownloading(false);
                        }}
                    >下载预览图</Button>
                }
                <Button
                    type="primary"
                    className={styles.btn}
                    onClick={() => {
                        rightTopStore.save();
                    }}
                >保存商品</Button>
            </div>

            <img
                alt=""
                src={closePNG}
                className={styles.close}
                onClick={() => {
                    preView2D3DStore.setShow(false);
                }}
            />
        </Popup >
    );
}